<template>
	<view>
		<u-mask :z-index="99999" :show="isShowShare" @click="closeShare">
			<view class="shareBox">
				<view class="u-p-l-40 u-p-r-40 reportResult">
					<view class="reportResultItem">
						<button open-type="share" id="User" class="share">
							<view class="u-m-b-10">
								<u-icon name="zhuanfa" :size="68"></u-icon>
							</view>
							<view>好友</view>
						</button>
					</view>
		
					<view class="reportResultItem">
						<button id="Moments" class="share" @click="handleOpenShowMoment">
							<view class="u-m-b-10">
								<u-icon name="moments" :size="68"></u-icon>
							</view>
							<view>朋友圈</view>
						</button>
					</view>
					
					<view class="reportResultItem" v-if="isMoment">
						<button class="share" @click="handleOpenMoment">
							<view class="u-m-b-10">
								<u-icon name="photo-fill" :size="68"></u-icon>
							</view>
							<view>海报</view>
						</button>
					</view>
				</view>
			</view>
		</u-mask>
		
		<u-mask :z-index="99999" :show="isShowMoment" @click="handleCloseShowMoment">
			<view class="">
				<img src="@/common/img/shareCommon.png" alt="" class="momentImage">
			</view>
		</u-mask>
	</view>
</template>

<script>
	export default{
		props:{
			isShowShare:{
				type: Boolean,
				default: false
			},
			isMoment:{
				type: Boolean,
				default: false
			}
		},
		data(){
			return{
				isShowMoment: false
			}
		},
		methods:{
			closeShare(){
				this.$emit('closeShare')
			},
			handleOpenShowMoment(){
				this.isShowMoment = true
			},
			handleCloseShowMoment(){
				this.isShowMoment = false
			},
			handleOpenMoment(){
				this.$emit('handleOpenMoment')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.shareBox {
		width: 100%;
		height: 100%;
		position: absolute;
	
		.reportResult {
			width: 90%;
			height: auto;
			margin: 0 30rpx;
			background-color: #fff;
			position: absolute;
			border-radius: 20rpx;
			bottom: 80px;
			display: flex;
			justify-content: space-around;
	
			.reportResultItem {
				color: #B3723E;
				margin: 40rpx 0;
				text-align: center;
				font-size: 28rpx;
	
				button {
					color: #B3723E;
					font-size: 28rpx;
					padding-left: 0px;
					padding-right: 0px;
				}
			}
		}
		
		.share {
			background-color: #fff;
			line-height: 20px;
		
			button:active {
				border: none;
			}
		}
		
		.share::after {
			border: none !important;
		}
	}
	
	.momentImage{
		width:500rpx;
		height: 300rpx;
		position: absolute;
		right: 1%;
		top: 5%;
	}
	
</style>